<template>
	<view class="ac-notice-bar" :class="[props._class]" :style="[_style, props._style]" @click="_onClick">
		<slot name="left">
			<ac-icon
				v-if="props.showIcon === true || showIcon === 'true'"
				_class="mr-8"
				name="sound"
				:color="props.leftIconColor"
				:size="leftIconSize"
			/>
		</slot>

		<swiper
			:circular="true"
			:vertical="true"
			:interval="5000"
			:duration="500"
			:disable-touch="true"
			class="flex-1"
			:style="{ height: props.height + 'rpx' }"
		>
			<swiper-item class="flex-row items-center" v-for="(item, idx) in props.list" :key="idx" @click="goItem(item)">
				<view class="flex-1">
					<slot :item="item" :index="idx" name="content">
						<text class="line-1 color-second size-lg">{{ item[theKey] }}</text>
					</slot>
				</view>
			</swiper-item>
		</swiper>

		<slot name="right"> </slot>
		<view class="notice_right color-third size-md" v-if="props.showMore">
			<view @click="goMore">查看</view>
		</view>
	</view>
</template>

<script setup>
import { computed } from 'vue';
import { pub_props, computedColor } from '@/uni_modules/ac-ui/utils/minxs/props';

const emits = defineEmits(['click', 'itemClick', 'moreClick', 'longpress']);

const props = defineProps({
	...pub_props,
	//主题色,default|primary|error|warning|success|info
	color: {
		type: String,
		default: 'white',
	},
	// 是否显示左侧icon
	showIcon: {
		type: [Boolean, String],
		default: true,
	},
	// 是否显示更多
	showMore: {
		type: [Boolean, String],
		default: false,
	},
	leftIconColor: {
		type: String,
		default: 'gray-8',
	},
	height: {
		type: Number,
		default: 60,
	},
	leftIconSize: {
		type: String,
		default: '44',
	},
	list: {
		type: Array,
		default() {
			return [
				{ id: 1, title: '公告1' },
				{ id: 2, title: '公告2' },
			];
		},
	},
	//公告数组的键名
	theKey: {
		type: String,
		default: 'title',
	},
	//方向，column垂直，row水平时取第一条公告
	direction: {
		type: String,
		default: 'column',
	},
	_class: {
		type: [String, Array],
	},
	_style: {
		type: String,
	},
});

const _style = computed(() => {
	let style = {};
	// if (props.border) {
	// 	let direction = props.borderDirection === 'all' ? '' : '-' + props.borderDirection;
	// 	style[`border${direction}`] = `solid ${props.border}rpx`;
	// 	style[`border${direction}-color`] = computedColor(props.borderColor, '', props.theme);
	// }

	// if (props.color) {
	// 	style['background-color'] = computedColor(props.color, props.linear ? 'linear' : '', props.theme);
	// }
	// if (props.color && props.linear) {
	// 	style['background-image'] = computedColor(props.color, props.linear ? 'linear' : '', props.theme);
	// }
	if (props.shadow) {
		if (props.shadow == 1) {
			style['box-shadow'] = '0 2px 2px 0 #ccc';
		}
	}
	return style;
});

function _onClick(e) {
	console.log(12323);
	emits('click', e);
}

function _onLongPress(e) {
	emits('longpress', e);
}

function goItem(item) {
	console.log(12323);
	emits('itemClick', item);
}

function goMore() {
	console.log(12323);
	emits('moreClick');
}
</script>

<script>
export default {
	name: 'xzw-notice',
	props: {
		//主题色,default|primary|error|warning|success|info
		theme: {
			type: String,
			default: 'default',
		},
		// 是否显示左侧icon
		showIcon: {
			type: [Boolean, String],
			default: true,
		},
		// 是否显示更多
		showMore: {
			type: [Boolean, String],
			default: true,
		},
		list: {
			type: Array,
			default() {
				return [
					{ id: 1, title: '公告1' },
					{ id: 2, title: '公告2' },
				];
			},
		},
		//公告数组的键名
		theKey: {
			type: String,
			default: 'title',
		},
		//方向，column垂直，row水平时取第一条公告
		direction: {
			type: String,
			default: 'column',
		},
		_class: {
			type: String,
		},
	},
	data() {
		return {
			text: '',
		};
	},
	methods: {
		getColor(theme) {
			if (theme == 'primary') {
				return '#2979FF';
			} else if (theme == 'error') {
				return '#FA3534';
			} else if (theme == 'warning') {
				return '#FF9A43';
			} else if (theme == 'success') {
				return '#1BBF6C';
			} else if (theme == 'info') {
				return '#909399';
			} else {
				return '#303133';
			}
		},
		getBgColor(theme) {
			if (theme == 'primary') {
				return '#ECF5FF';
			} else if (theme == 'error') {
				return '#FEF0F0';
			} else if (theme == 'warning') {
				return '#FDF6EC';
			} else if (theme == 'success') {
				return '#DBF1E1';
			} else if (theme == 'info') {
				return '#F4F4F5';
			} else {
				return '#FFFFFF';
			}
		},
		// goItem(item) {
		// 	this.$emit('goItem', item)
		// },
		// goMore() {
		// 	this.$emit('goMore')
		// }
	},
};
</script>

<style lang="scss">
.ac-notice-bar {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center;
	// width: 690rpx;
}

.xzw_notice {
	font-size: 26upx;
	height: 90upx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 20upx;
	box-sizing: border-box;
	width: 100%;

	.notice_left {
		margin: 0 20upx 0 0;
	}

	.notice_center {
		flex: 1;
		height: 90upx;

		.swiperIn {
			height: 80upx;
			display: flex;
			align-items: center;

			view {
				overflow: hidden;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}
	}

	.notice_center2 {
		flex: 1;
		position: relative;
		display: flex;
		align-items: center;
		height: 90upx;
		overflow: hidden;

		view {
			position: absolute;
			white-space: nowrap;
			padding-left: 100%;
			animation: notice 5s 0s linear infinite both;
		}
	}

	.notice_right {
		margin: 0 0 0 20upx;
	}

	@keyframes notice {
		100% {
			transform: translate3d(-100%, 0, 0);
		}
	}
}
</style>
